<template>
	<a-card>
		<div :class="advanced ? 'search' : null">
			<a-form layout="horizontal" :model="searchForm">
				<div :class="advanced ? null: 'fold'">
					<a-row>
						<a-col :md="6" :sm="24">
							<a-form-item label="手机号" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
								<a-input placeholder="请输入手机号" allowClear v-model="searchForm.mobile" />
							</a-form-item>
						</a-col>
						<a-col :md="4">
							<span style="float: right; margin-top: 3px;">
								<a-button type="primary" @click="search">查询</a-button>
								<a-button style="margin-left: 8px">重置</a-button>
							</span>
						</a-col>
					</a-row>
				</div>
			</a-form>
		</div>
		<div>
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column prop="sale_user_id" label="ID" />
				<el-table-column prop="contact_tel" label="账号" />
				<el-table-column prop="contact_tel" label="手机号" />
				<el-table-column prop="faname" label="姓名" />
				<el-table-column prop="create_time" label="申请时间" />
				<el-table-column fixed="right" label="操作">
					<template slot-scope="scope">
						<el-button @click="handleClickCenter(scope.row)" type="text" size="small">查看</el-button>
						<!-- <el-button v-if="perSale==1?true:false" @click="handleClick(scope.row)" type="text" size="small">审核</el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<div class="flex align-center justify-end custom_page">
				<span class="total">共{{ pageTotal }}页</span>
				<span class="total">共{{ total }}条</span>
				<el-pagination class="text-right" prev-text="上一页" next-text="下一页" :page-size="pageSize"
					:page-sizes="pageList" :total="total" background :layout="layout" :current-page.sync="page"
					@current-change="handleCurrentChange" @size-change="handleSizeChange" />
			</div>
		</div>
		<check-dialog ref="checkDialog" :sale-user-id="sale_user_id" @getList="getList" />
		<center-dialog ref="centerDialog" :center-id="center_id" />
	</a-card>
</template>

<script>
	import {
		saleApplyList
	} from '@/api/extension'
	export default {
		name: 'BasicForm',
		components: {
			checkDialog: () => import('./components/checkDialog'),
			centerDialog: () => import('./components/centerDialog')
		},
		data() {
			return {
				searchForm: {
					mobile: ''
				},
				advanced: true,
				tableData: [],
				total: 0,
				sale_user_id: 0,
				center_id: 0,
				page: 1,
				pageSize: 10,
				pageList: [5, 10, 20, 50, 100],
				flag:true,
				perSale:''
			}
		},
		// watch: {
		// 	$route() {
		// 		location.reload();
		// 	},
		// },
		computed: {
			pageTotal() {
				const num = Math.ceil(this.total / this.pageSize)
				return num > 0 ? num : 1
			},
			layout() {
				if (this.total === 0) {
					return 'prev, pager, next'
				}
				if (this.pageTotal > 1) {
					return 'sizes, prev, pager, next, jumper'
				}
				return 'sizes, prev, pager, next'
			}
		},
		authorize: {
			deleteRecord: 'delete'
		},
		methods: {
			getList(flag) {
				const {
					page,
					pageSize
				} = {
					page: this.page,
					pageSize: this.pageSize
				}
				if (!flag) {
					this.tableData = []
				}
				saleApplyList({
					page,
					pageSize,
					mobile: this.searchForm.mobile
				}).then(res => {
					this.total = res.total
					this.tableData = res.data
					console.log(res);
				})
			},
			handleClick(item) {
				console.log(item.sale_user_id);
				// console.log('this.$refs.currentPage', this.$refs.currentPage.page);
				this.sale_user_id = item.sale_user_id
				this.$refs.checkDialog.dialogVisible = true
			},
			handleClickCenter(item) {
				this.center_id = item.sale_user_id
				console.log(this.center_id);
				this.$refs.centerDialog.dialogVisible = true
			},
			search() {
				this.getList()
			},
			changePageSize(val) {
				this.pageSize = val
				if (this.pageList.indexOf(val) === -1) {
					this.pageList.unshift(val)
				}
			},
			handleSizeChange(val) {
				this.page = 1
				this.pageSize = val
				this.getList()
			},
			handleCurrentChange(val) {
				this.page = val
				this.getList()
			}
		},
		mounted() {
			// if (location.href.indexOf("#reloaded") == -1) {
			// 	location.href = location.href + "#reloaded";
			// 	location.reload();
			// }
			this.perSale=localStorage.getItem('admin.saleId')
			this.getList()
		},
	}
</script>

<style lang="less" scoped>
	.search {
		margin-bottom: 0px;
	}

	.fold {
		width: calc(100% - 216px);
		display: inline-block
	}

	.operator {
		margin-bottom: 18px;
	}

	@media screen and (max-width: 900px) {
		.fold {
			width: 100%;
		}
	}

	.custom_page {
		margin-top: 15px;

		.total {
			margin-right: 10px;
		}

		.page_btn {
			color: #333333;
			background: #ffffff;
			border: 1px solid #eeeeee;
			font-size: 14px;
			padding-left: 12px;
			padding-right: 12px;
			min-width: 30px;
			border-radius: 2px;
			height: 28px;
			vertical-align: top;
			cursor: pointer;
		}

		.el-pagination__jump {
			margin-left: 10px;
			margin-right: 10px;
		}
	}
</style>
